<template>
  <div class="table-operations">
    <template v-for="(item, index) in trueStatusOperations">
      <el-tooltip
        v-if="index < props.visibleSize && item.disabled"
        :key="index"
        :content="item.disabledDescription"
        placement="top"
      >
        <span
          v-if="index < props.visibleSize"
          class="table-operations-item table-operations-item-disabled"
          @click="handleTableOperationsClick(item.type)"
          >{{ item.text }}</span
        >
      </el-tooltip>
      <span
        v-if="index < props.visibleSize && !item.disabled"
        :key="index"
        class="table-operations-item"
        @click="handleTableOperationsClick(item.type)"
        >{{ item.text }}</span
      >
    </template>
    <!-- ...是否显示 -->
    <el-popover
      v-if="trueStatusOperations.length > props.visibleSize"
      ref="reference"
      popper-class="table-operations-more"
      placement="bottom"
    >
      <template #reference
        ><el-icon><MoreFilled /></el-icon
      ></template>
      <template v-for="(item, index) in trueStatusOperations">
        <el-tooltip
          v-if="index >= props.visibleSize && item.disabled"
          :key="index"
          :content="item.disabledDescription"
          placement="top"
        >
          <span
            v-if="index >= props.visibleSize"
            :key="index"
            class="table-operations-more-item table-operations-more-item-disabled"
            @click="handleTableOperationsClick(item.type)"
            >{{ item.text }}</span
          >
        </el-tooltip>
        <span
          v-if="index >= props.visibleSize && !item.disabled"
          :key="index"
          :class="['table-operations-more-item', props.className]"
          @click="handleTableOperationsClick(item.type)"
          >{{ item.text }}</span
        >
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import { computed } from "vue";
import type { operation } from "./types";

const props = defineProps({
  operations: {
    type: Array as PropType<Array<operation>>,
    require: true,
    default: () => []
  },
  row: {
    type: Object,
    require: true,
    default() {
      return {};
    }
  },
  visibleSize: {
    type: Number,
    default: 3
  },
  className: {
    type: String,
    default: ""
  }
});
const emit = defineEmits(["click"]);

const trueStatusOperations = computed<Array<operation>>(() => {
  return props.operations.filter(item => item.show);
});

const handleTableOperationsClick = (operationType: string | number) => {
  const isDisabled = (
    props.operations.find(item => item.type === operationType) as operation
  ).disabled;
  if (isDisabled) return;
  emit("click", props.row, operationType);
};
</script>

<style lang="scss">
$--color-primary: #2878ff !default;
$color-text-disabled: #d8d8d8 !default; // 被禁用颜色
$bg-color-view-hold: #e6eaf0 !default;

.table-operations {
  &-item {
    display: inline-block;
    margin-right: 24px;
    cursor: pointer;
    color: $--color-primary;

    &-disabled {
      color: $color-text-disabled;
      cursor: not-allowed;
    }
  }

  &-more {
    display: inline-block;
    width: 160px;
    padding: 8px 0;
  }

  &-more-item {
    display: block;
    line-height: 32px;
    padding: 0 16px;
    cursor: pointer;
    color: $--color-primary;

    &:hover {
      background: $bg-color-view-hold;
    }

    &-disabled {
      color: $color-text-disabled;
      cursor: not-allowed;
    }
  }
}
</style>
